<template>
  <div class="collection_div">
    <!-- 头部 -->
    <my-header :left="true" title="我的收藏">
      <template #right_icon>
        <span class="bianji" @click="bianji" ref="bianji_btn">{{title_font}}</span>
      </template>
    </my-header>
    <!-- 皮肤信息展示部分 -->
    <div v-if="isRander" class="skin_div_warp">
      <!-- 皮肤展示部分 -->
      <show-in-fo
        class="skin_div"
        :style="{paddingLeft:padding_left}"
        v-for="(item,index) of skin_data.gameid" 
        :key="item.gameid"
        :game_data_index="index" 
        :game_data="skin_data">
        <template #radio>
          <!-- 单选按钮部分 -->
          <div class="radio" @click="chooes_delete(item.gameid)">
            <img :class="chooes_skin.indexOf(item.gameid) != -1 ? 'run':''" src="../../assets/img/coll/chooes.png">
          </div>
        </template>
      </show-in-fo>
    </div>
    <div v-if="!isRander">
      <van-loading size="0.24rem" class="loading" vertical>数据加载中...</van-loading>
    </div>
    <div v-if="skin_data.gameid.length == 0 && isRander">
      <p class="font">暂无数据</p>
    </div>
    <!-- 底部取消收藏按钮 -->
    <div class="quxiao" @click="cancelColl" :class="chooes_skin.length > 0 ? 'chooes_quxiao':''" :style="{bottom:quxiao_btn}">
      取消收藏
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
import ShowInFo from "../Home/components/ShowInFo";
export default {
  name:"collection",
  components:{
    MyHeader,
    ShowInFo
  },
  created() {
    this.getData();
  },
  data() {
    return {
      skin_data:{},// 皮肤展示数据
      padding_left:"0rem",// 左边距
      quxiao_btn:"-0.48rem",// 取消收藏按钮
      isRander:false,//阻止渲染
      chooes_skin:[],// 选择即将被删除的皮肤ID
      title_font:"编辑",// 标题文字
    }
  },
  methods: {
    // 获取数据
    async getData(){
      this.isRander = false;
      const {data : res} = await this.$http.get("/getCollection");
      if(res.status == 403){
        this.$router.push("/login");
        return
      }
      console.log(res.data);
      this.skin_data = res.data;
      this.isRander = true;
    },
    // 编辑按钮点击事件
    bianji(){
      this.title_font = this.title_font == "编辑" ? "取消":"编辑";
      this.padding_left = this.padding_left == "0.31rem" ? "0rem" : "0.31rem"
      this.quxiao_btn = this.quxiao_btn == "-0.48rem" ? "0rem" : "-0.48rem"
    },
    // 选择需要删除的皮肤
    chooes_delete(gid){
      if(this.chooes_skin.indexOf(gid) != -1){
        // 移除
        this.chooes_skin.remove(gid);
      }else{
        // 添加
        this.chooes_skin.push(gid);
      }
    },
    // 取消收藏
    cancelColl(){
      // 确认弹框
      this.$dialog.confirm({
        message:"是否确认取消收藏",
      }).then(async () => {
        // 发送取消收藏请求
        const {data:res} = await this.$http.post("cancelColl",{deleteuid:this.chooes_skin.join(",")});
        this.$message({position:"center",message:res.message});
        if(!res.isok) return;
        this.$refs.bianji_btn.click();
        this.chooes_skin = [];
        // 刷新数据
        this.getData();
      }).catch(() => {
        console.log("no");
      })
    }
  },
}
</script>
<style lang="less" scoped>
  .bianji{
    font-size: 0.16rem;
  }
  .skin_div_warp{
    padding-top: 0.45rem;
    padding-bottom: 0.48rem;
    min-height: 100%;
  }
  .skin_div{
    position: relative;
    margin-top: 0.06rem;
    background-color: #FFF;
    transition: all .2s;
    .radio{
      position: absolute;
      width: 0.176rem;
      height: 0.176rem;
      border-radius: 100%;
      top: 50%;
      left: 0.1rem;
      border: 0.01rem solid #888;
      img{
        position: absolute;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(170deg);
        width: 120%;
        height: 120%;
        transition: opacity .3s ease,transform .3s ease;
      }
    }
    /deep/.skin_back{
      height: auto !important;
    }
  }
  .run{
    opacity: 1 !important;
    transform: translate(-50%,-50%) rotate(0deg) !important;
  }
  .quxiao{
    position: fixed;
    z-index: 2;
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.48rem;
    color: #FFF;
    height: 0.48rem;
    background-color: #EBEBEB;
    width: 100%;
    transition:all .3s;
  }
  .chooes_quxiao{
    background-color: #E74E4B;
    color: #FFF;
  }
  .font{
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.48rem;
  }
</style>